<!-- 共同去处理、规范约定他们 -->
 <!-- Text/Image/Chart -->

 <template>
    <component :is="blockMaterial" :block="block" />
  </template>
  
  <script setup lang='ts'>
  import { computed, toRaw } from 'vue';

  import type { Block } from '@/types/block';

  import ChartBlock from './internal/ChartBlock.vue';
  import FallbackBlock from './internal/FallbackBlock.vue';
  import ImageBlock from './internal/ImageBlock.vue';
  import TextBlock from './internal/TextBlock.vue';

  // 正常情况是不会写死的，而是从外面传入
/*   let block:Block={
    id:'1',
    type: "text",
    props:{
      content:"Hello world"
    }
  } */

  // 应该这么传入
  const props=defineProps<{
    block: Block;
  }>()

  console.log("props",toRaw(props));
  

  // 其实是物料
  const blockMaterial = computed(()=>{
    switch(props.block.type){
      case "chart":
        return ChartBlock;
      case "text": 
        return TextBlock;
      case "image":
        return ImageBlock;
      default:
        return FallbackBlock
    }
  })

  

  </script>
  
  <style scoped>
  
  </style>